<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="layout">
<head>
<title>home</title>
	<link href="../static/css/main.css">
</head>
<body>
	<!--<h1 layout:fragment="header">Messages : View all</h1>-->
	<div layout:fragment="content" class="container">
		<div class="box-header with-border">
			<h3 class="box-title">属性管理</h3>
		</div>
		<!-- /.box-header -->
		<!-- form start -->
		<form class="form-horizontal" role="from">
			<div class="box-body">
				<div class="form-group col-md-3">
					<label for="search_value" class="col-sm-4 control-label">属性值</label>

					<div class="col-xs-8 no-padding">
						<input type="text" id="search_value" class="form-control" placeholder="用户名" name="search_value">
					</div>
				</div>
				<div class="form-group col-md-3">
					<label for="search_type" class="col-sm-4 control-label">类型</label>

					<div class="col-xs-8 no-padding">
						<select id="search_type" class="form-control" name="search_type">
							<option value="0">--全部--</option>
							<option value="1">高校</option>
							<option value="2">部门</option>
							<option value="3">职务</option>
						</select>
					</div>
				</div>
				<div class="form-group col-md-3 right-button">
					<button th:if="${#lists.contains(resource,'/admin/attribute/buttuntest')}" onclick="searchBtn()" type="button" class="btn btn-danger right-button">搜索</button>
					<button onclick="addBtn()" type="button" class="btn btn-success right-button">添加</button>
				</div>
			</div>
		</form>
		<div class="box-body">
			<table id="attribute" class="table table-bordered table-striped">
				<thead>
				<tr>
					<th>序号</th>
					<th>属性值</th>
					<th>类型</th>
					<th>修改时间</th>
					<th>操作</th>
					<th>checkbox</th>
				</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<div class="modal" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span></button>
						<h3 class="modal-title" style="font-size:18px">新增属性</h3>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="addFrom">
							<div class="box-body">
								<div class="form-group">
									<div class="col-sm-6">
										<div class="form-group">
											<label for="add_value" class="col-sm-4 control-label">属性值</label>
											<div class="col-sm-8">
												<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
												<input type="text" class="form-control" id="add_value" data-rule="required(属性值必须填写)" name="value" placeholder="属性值">
												<input type="hidden" id="id" name="id">
											</div>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="form-group">
											<label for="add_type" class="col-sm-4 control-label">类型</label>
											<div class="col-sm-8">
												<select id="add_type" class="form-control" name="type">
													<option value="1">高校</option>
													<option value="2">部门</option>
													<option value="3">职务</option>
												</select>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" onclick="modal_sub()">
							确认
						</button>
						<button class="btn btn-warning" data-dismiss="modal">退出</button>
					</div>
				</div>
			</div><!-- /.modal -->
		</div>
		<script type="text/javascript">
			var table;
			$(function(){
				table=$("#attribute").DataTable({
					"ajax": {
						url:"../../admin/attribute/Get",
						type:"POST",
						dataType: "json",
						data:function(d){
							d.value=$("#search_value").val()
							d.type=$("#search_type").val()
						},error:function(XMLHttpRequest,textStatus,errorThrown){
							console.log("载入数据出错");
						}
					},
					"bProcessing": true,
					"bServerSide": true,
					"bPaginate": true,
					"bAutoWidth": true,
					"bInfo": true,//页脚信息
					"bFilter": false,//禁用搜索
					"bSort":false,//禁用排序
					"aLengthMenu": [2,3,300],
					"sPaginationType":'full_numbers',
					"columns": [
						{"data":"id"},
						{ "data": "value" },
						{ "data": "type" },
						{ "data": "postTime" },
						{ "data": "id" },
						{ "data": "id" },
					],
					"aoColumnDefs": [ {
						"aTargets": [ 2 ],
						"mRender": function ( data, type, full ) {
							switch (data){
								case 1:return "高校";break;
								case 2:return "部门";break;
								case 3:return "职务";break;
								default :return "其他";break;
							}
						}
					},{
						"aTargets": [ 3 ],
						"mRender": function ( data, type, full ) {
							return data
						}
					},
						{
							"aTargets": [ 4 ],
							"mRender": function ( data, type, full ) {
								return '<a onclick="editData(\''+full.id+'\',\''+full.value+'\',\''+full.type+'\')">修改</a>' +
										'<a style="margin-left: 12px" onclick="delData(\''+full.id+'\')">删除</a>';
							}
						},
						{
							"aTargets": [ 0 ],
							"mRender": function ( data, type, full ) {
								return '<input type="checkbox" name="tab_box" value="'+full.id+'" onclick="checkId(\''+full.id+'\')">';
							}
						}
					],
					"fnRowCallback": function (nRow, aData, iDisplayIndex) {
						$("td:first", nRow).html(iDisplayIndex + 1);
						return nRow;
					},
					"oLanguage": {
						"sProcessing": "处理中...",
						"sLengthMenu": "每页 _MENU_ 条",
						"sZeroRecords": "没有匹配结果",
						"sInfo": " _START_ 至 _END_ 项结果，共 _TOTAL_ 项",//显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项
						"sInfoEmpty": "",//显示第 0 至 0 项结果，共 0 项
						"sInfoFiltered": "",//(由 _MAX_ 项结果过滤)
						"sInfoPostFix": "",
						"sSearch": "搜索：",
						"sUrl": "",
						"sEmptyTable": "没有数据呀!",
						"sLoadingRecords": "载入中...",
						"sInfoThousands": ",",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "上页",
							"sNext": "下页",
							"sLast": "末页"
						}
					},
				});
			})
			//偏好使用HTML
			new SMValidator('#addFrom');

			function searchBtn(){
				table.draw();
			}

			function addBtn(){
				$(".modal-title").text("新增属性")
				$("#id").val("")
				$("#add_value").val("")
				$("#add_type").find("option[value='"+1+"']").attr("selected",true);
				$("#myModal").modal("show")
			}

			function modal_sub(){
				if(SMValidator.validate('#addFrom')){
					$.ajax({
						url: "../../admin/attribute",
						type: "POST",
						dataType: "json",
						data: $("#addFrom").serialize(),
						beforeSend: function () {
						},
						success: function (data) {
							if(data){
								var msg = ""
								if($("#id").val()){
									msg = "修改成功"
								}else {
									msg = "新增成功"
								}
								Lobibox.notify('success', {
									msg: msg,
									sound: false
								});
								$("#myModal").modal("hide")
								table.draw();
							}else {
								console.log(data)
							}
						}, error: function () {
						}
					});
				}
			}

			function editData(id,val,type){
				$(".modal-title").text("修改属性")
				$("#id").val(id)
				$("#add_value").val(val)
				$("#add_type").find("option[value='"+type+"']").attr("selected",true);
				$("#myModal").modal("show")
			}

			function delData(id){
				Lobibox.confirm({
					msg: "确认要删除这条属性?",
					title:"删除属性",
					iconClass: false,
					callback: function ($this, type, ev) {
						if(type){
							$.ajax({
								url: "../../admin/attribute/"+id+"?_csrf="+$("input[name=_csrf]").val(),
								type: "DELETE",
								dataType: "json",
								success: function (data) {
									if(data){
										table.draw();
										Lobibox.notify('success', {
											msg: '删除成功',
											sound: false
										});
									}else {
										Lobibox.notify('error', {
											msg: '删除成功',
											sound: false
										});
									}
								}, error: function () {
								}
							});
						}
					}
				});
			}

			function checkId(id) {
				if($("input[value='"+id+"']").prop("checked")){
					alert("被选中");
				}
			}
		</script>
	</div>
</body>
</html>
